<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<title>文字模糊动画</title>
		<style type="text/css">
			* {
  margin: 0;
  box-sizing: border-box;
}
html,
body {
  height: 100%;
}
body {
  background-color: #000;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 1rem;
}
blockquote {
  display: block;
  margin: 0 auto;
  text-align: center;
  max-width: 900px;
}
p,
cite {
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
p {
  font-family: Georgia;
  color: #fff;
  font-size: 2.7rem;
  font-style: italic;
  font-weight: 300;
  padding-bottom: 2rem;
}
span {
  will-change: opacity;
  opacity: 0;
}
span.animate {
  opacity: 1;
  -webkit-filter: blur(0) !important;
}
cite {
  font-family: verdana;
  font-size: 0.9rem;
  color: #aaa;
  opacity: 0;
  font-style: normal;
  font-weight: 500;
}
cite.animate {
  opacity: 1;
}

		</style>
	</head>
	<body>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js"></script>
<blockquote>
 <p>
  <span data-duration="1.1" data-delay=".23" data-blur="6">“Two </span>
  <span data-duration="1.4" data-delay=".43" data-blur="3">things </span>
  <span data-duration="1.8" data-delay=".42" data-blur="5">are </span>
  <span data-duration="1.2" data-delay=".25" data-blur="9">infinite: </span>
  <span data-duration="1.7" data-delay=".30" data-blur="4">the </span>
  <span data-duration="1.2" data-delay=".29" data-blur="3">universe </span>
  <span data-duration="1.4" data-delay=".26" data-blur="5">and </span>
  <span data-duration="1.7" data-delay=".19" data-blur="9">human </span>
  <span data-duration="1.2" data-delay=".11" data-blur="5">stupidity; </span>
  <span data-duration="1.9" data-delay=".19" data-blur="2" >and </span>
  <span data-duration="1.2" data-delay=".36" data-blur="9" >I'm </span>
  <span data-duration="1.8" data-delay=".17" data-blur="3" >not </span>
  <span data-duration="1.2" data-delay=".30" data-blur="10" >sure </span>
  <span data-duration="1.5" data-delay=".50" data-blur="4" >about </span>
  <span data-duration="1.8" data-delay=".19" data-blur="2" >the </span>
  <span data-duration="1.3" data-delay=".18" data-blur="4" >universe.” </span>
 </p>
 <cite>Albert Einstein</cite>
</blockquote>
<script src="../js/jquery-1.11.2.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	const words = document.getElementsByTagName('span')
const cite = document.getElementsByTagName('cite')

const animate = () => {
  let maxDelay = 0
  let maxDuration = 0

  for (let i = 0; i < words.length; i++) {
    const word = words[i]
    const duration = (word.dataset.duration)
    const delay = (word.dataset.delay)
    const blur = word.dataset.blur

    maxDelay = Math.max(delay, maxDelay)
    maxDuration = Math.max(duration, maxDuration)

    TweenLite.set(word, {
      'webkitFilter': `blur(${blur}px)`
    })
    TweenLite.set(word, {
      className: "+=animate",
      transition: `all ${duration}s ease-in ${delay}s`
    })
  }

  TweenLite.set(cite, {
    className: "+=animate",
    transition: `all ${maxDuration}s ease-in ${maxDelay}s`
  })

  TweenLite.delayedCall((maxDuration + maxDelay), () => {
    const baseDelay = 3
    TweenLite.set(words, {
      className: "-=animate",
      delay: baseDelay
    });
    TweenLite.set(cite, {
      className: "-=animate",
      delay: (baseDelay)
    });
    TweenLite.delayedCall((baseDelay + (maxDuration * 2)), animate)
  })
}

animate()
</script>
	</body>
</html>
